import styled from "styled-components";

const CardRecordStyle = styled.div`
  .obsoleteCard {
    &::before {
      position: absolute;
      content: "已失效";
      right: 0;
      top: 0;
      color: #efecec;
      font-style: oblique;
      background: rgba(0, 0, 0, 0.4);
      padding-right: 20px;
      box-sizing: border-box;
      font-weight: bolder;
      font-size: 50px;
      text-align: center;
      width: 100%;
      height: 100%;
      z-index: 1;
      border-radius: 15px;
    }
  }

  .cardWrapper {
    position: relative;
    background-image: linear-gradient(100deg, #a8edea 0%, #fed6e3 100%);
    margin: 15px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 15px;
    padding: 6px;
    z-index: 10;

    .info {
      & > div {
        margin: 3px 0;
      }

      .cardName {
        font-size: 15px;
        font-weight: 600;
      }

      .orgName,
      .courseName {
        font-size: 13px;
      }
    }

    .detail {
      display: flex;
      flex-direction: column;
      align-items: end;

      .cardType {
        margin: 5px 0;
        padding: 3px 2px;
        width: fit-content;
      }

      .stash {
        font-size: 13px;
      }
    }
  }
`;

export default CardRecordStyle;
